<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.head{
				width: 800px;
				height: 55px;
				/*border: 1px solid black;*/
				position: relative;
			}
			.nav{
				width: 100%;
				height: 55px;
				/*border: 1px solid black;*/
				position: relative;
			}
			.logo{
				width: 179px;
				height: 39px;
				position: absolute;
				left:95px;
				top:15px ;
			}
			.search input{
				width:200px ;
				height: 25px;
				position: absolute;
				right: 50px;
				top: 15px;
			}
			.search img{
				position: absolute;
				top: 15px;
				right: 50px;
			}
			.nav{
				background-image: url(img/nav_bg.png);
			}
			ul li{
				/*去掉超链接的点*/
				list-style: none ;
			}
			ul li a{
				float: left;
				font-size: 12px;
				color: black;
				padding-left: 80px;
				/*去掉下划线*/
				text-decoration: none;
				/*水平居中*/
				text-align: center;
				/*垂直居中*/
				line-height: 55px;
			}
			ul li a:hover{
				color: green;
			}
			.main_top {
				width: 980px;
				height: 597px;
				/*border: 1px solid black;*/
				margin: 0 auto ;
			}
			.main_center{
				width: 100%;
				height: 60px;
				/*border: 1px solid black;*/
				position: relative;
				background-image: url(img/nav_bg-line.png);
			}
			.main_center span{
				color: black;
				display: block;
				margin-left: 150px;
				line-height: 60px;
			}
			.main_center ul{
				position: absolute;
				right: 150px;
				top: 5px;
			}
			.main_center ul li {
				width: 20px;
				height: 20px;
				/*border: 1px solid black;*/
				display: inline-block;
			}
			.main_bottom{
				width: 100%;
				height: 280px;
				/*border:1px solid black;*/
			}
			.bottom_left,.bottom_center,.bottom_right{
				width: 300px;
				height: 270px;
				border: 1px solid gainsboro;
				float: left;
				margin-left: 10px;
			}
			.bottom_left{
				margin-left: 120px;
				position: relative;
			}
			.img1{
				position: absolute;
				left: 50px;
				top: 80px;
			}
			.bottom_center{
				width: 380px;
			}
			.bottom_center p{
				font-size: 10px;
				margin: 15px 30px;	
				border-bottom: 1px dotted darkgray;
			}
			.bottom_center p a{
				text-decoration: none;
				color: #000000;
			}
			.bottom_center p a:hover{
				color: red;
			}
			.bottom_right ul li{
				list-style-type: square;
				color: green;
			}
			.bottom_right ul li p{
				font-size: 15px;
				color: #000000;
				line-height: 2px;
			}
			.bottom_rr p{
				margin-left: 20px;
				font-size: 13px;
			}
			
			.left_top,.center_top,.right_top{
				margin-top:10px ;
				margin-left: 8px;
			}
			.left_top,.center_top,.right_top span{
				color: forestgreen;
				font-size: 14px;
			}
			.left_l,.left_r{
				width: 11px;
				height: 19px;
			}
			.left_l{
				position:absolute;
				left: 20px;
				top: 150px;
			}
			.left_r{
				position:absolute;
				right: 20px;
				top: 150px;
			}
			.foot{
				width: 100%;
				height: 200px;
				background-color: black;
			}
			.foot ul li{
				display: inline-block;
				width: 70px;
				height: 15px;
				/*border: 2px solid red;*/
				margin:10px 50px;
				color: white;
				font-size: 13px;
			}
			
		</style>
	</head>
	<body>
		<div class="head">
			<div class="logo"><img src="img/logo.jpg"/></div>
			<div class="search">
				<input type="text" value="请输入"/>
				<img src="img/search2.jpg"/>
			</div>
		</div>
		<div class="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">智能手机</a></li>
				<li><a href="#">平板电脑</a></li>
				<li><a href="#">配件</a></li>
				<li><a href="#">服务支持</a></li>
				<li><a href="#">关于尚合</a></li>
			</ul>
		</div>
		<div class="main">
			<div class="main_top">
				<img src="img/banner.jpg"/>
			</div>
			<div class="main_center">
				<span>最新公告：尚合智能手机审核下发审核下发</span>
				<ul>
					<li><img src="img/21.gif"/></li>
					<li><img src="img/renren.png"/></li>
					<li><img src="img/weibo.png"/></li>
					<li><img src="img/xinlang.png"/></li>
				</ul>
			</div>
			<div class="main_bottom">
				<div class="bottom_left">
					<div class="left_top">
						<img src="img/o.jpg"/>
						<span>新品发布</span>
					</div>
					<img class="img1" src="img/home_hot_01.png"/>
					<div class="left_l">
						<img src="img/left.png"/>
					</div>
					<div class="left_r">
						<div>
							<img src="img/right.png">
						</div>
					</div>
				</div>
				<div class="bottom_center">
					<div class="center_top">
						<img src="img/o.jpg"/>
						<span>新闻中心</span>
					</div>
					<p><a href="#">致歉公告</a></p>
					<p><a href="#">致歉公告</a></p>
					<p><a href="#">致歉公告</a></p>
					<p><a href="#">致歉公告</a></p>
					<p><a href="#">致歉公告</a></p>
					<p><a href="#">致歉公告</a></p>
				</div>
				<div class="bottom_right">
					<div class="right_top">
						<img src="img/o.jpg"/>
						<span>技术与支持</span>
					</div>
					<ul>
						<li><p>售后服务</p></li>
						<li><p>售后服务</p></li>
						<li><p>售后服务</p></li>
						<li><p>售后服务</p></li>
					</ul>
					<span class="bottom_rr">
						<p>深圳市汇聚科技有限公司</p>
						<p>服务热线：400-633-7922</p>
					</span>
				</div>
			</div>
		</div>
		<div class="foot">
			<p>
			  <ul>
				<li>尚合首页</li>
				<li>尚合首页</li>
				<li>尚合首页</li>
				<li>尚合首页</li>
			 </ul>
			</p>
			<p>
			  <ul>
				<li>联系我们</li>
				<li>联系我们</li>
				<li>联系我们</li>
				<li>联系我们</li>
			 </ul>
			</p>
			
		</div>
	</body>
</html>
